<template>
    <div>
    <div class="outmain ba_f formwidth">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>抖音小程序页面路径</span>
            </div>
        </div>
       <div>
           <el-table
                   v-loading="listLoading"
                   :element-loading-text="elementLoadingText"
                   :data="list"
                   class="mar_t20"
                   style="width: 100%">
               <el-table-column
                       prop="name"
                       label="名称"
               >
               </el-table-column>
               <el-table-column
                       prop="page"
                       label="链接"
               >
               </el-table-column>
               <el-table-column
                       prop="address"
                       label="操作"
                       align="center">
                   <template slot-scope="scope">
                       <el-button
                               size="mini"
                               @click="copyText(scope.row)">复制链接
                       </el-button>
                       <el-button size="mini" @click="openCode(scope.row)">查看二维码</el-button>
                   </template>
               </el-table-column>
           </el-table>
       </div>
    </div>
      <el-dialog title="二维码" :visible.sync="dialogVisible" :close-on-click-modal="false" width="30%">
        <div class="t_c">
          <img v-if="codeImg" :src="codeImg" class="imgCode"/>
          <p v-else>{{ warningText }}</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false" size="medium">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
import {getConfig, postConfig, getPage, getAlipayCode} from "@/api/setup";
    export default {
        created() {
            this.bus.$emit('loading', true);
            this.init();
        },
        data() {
            return {
                activeName:'1',
                form: {
                    name: '',
                    appId: '',
                    appSecret: '',
                    originalAppId: '',
                },
                form2: {
                    name: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入公众号名称', trigger: 'blur'},
                    ],
                    originalAppId: [
                        {required: true, message: '请输入originalAppId', trigger: 'blur'},
                    ],
                    appId: [
                        {required: true, message: '请输入AppId', trigger: 'blur'}
                    ],
                    appSecret: [
                        {required: true, message: '请输入appSecret', trigger: 'blur'}
                    ]
                },
                dialogVisible: false,
                list: [],
                codeImg: '',
                warningText: '',
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
            }
        },
        methods: {
            async init() {
                this.fetchData()
            },
            async fetchData() {
                this.listLoading = true;
                const { data } = await getPage({page: 'toutiaoPage'});
                this.list = data;
                this.bus.$emit('loading', false)
                setTimeout(() => {
                    this.listLoading = false;
                }, 100);
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            openCode(obj) {
              getAlipayCode({ page: obj.page, pageType: 'toutiao',ident: obj.ident }).then((res) => {
                if (res.code == 1) {
                  if (res.code == 1) {
                    this.codeImg = res.data;
                  } else {
                    this.warningText = res.data.msg;
                  }
                  this.dialogVisible = true;
                }
              });
            },
            copyText(row){
                let Url2 = row.page;
                var oInput = document.createElement('input');
                oInput.value = Url2;
                console.log(oInput.value);
                document.body.appendChild(oInput);
                oInput.select();
                document.execCommand("Copy");
                oInput.className = 'oInput';
                oInput.style.display='none';
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            },
            async onSubmit() {

            }
        }
    }
</script>
<style  lang="scss" scoped>
.imgCode {
  width: 200px;
  height: 200px;
}
</style>
